/* 右侧动画标签
 * AnimationTab.jsx
 */
import React, { Component, PropTypes } from 'react';

import {upCompAttr,upCompSurface,upCompAnimation,delCompAnimation,addCompAnimation,upCompEvent} from '../../../actions/h5/ComponentAction';
import {updatePageAttr} from '../../../actions/h5/PageAction';
import {listMusic,listImage,listFile,clearPageIdArr} from '../../../actions/FileHandleAction';
import {upH5Attr} from '../../../actions/h5/H5Action';

import {FONTS,ANIMATIONS} from '../../../utils/H5constants';
import UploadComponent from '../../../components/UploadComponent.jsx';
import {getImageWH} from '../../../utils/H5helper';

 class AnimationUnit extends Component{
	constructor(props){
		super(props);
	}

	playAnimation(id){
		let animation=$("#animation_"+this.props.index).val();
		let duration=$("#duration_"+this.props.index).val()+'s';
		if(animation!=''){
			//console.log(id+'play animation');
			$("#"+id).css({ 
				'animation':'',
        	    '-webkit-animation':''
			});
			$("#"+id).hide();
			const animationVal=animation+' '+duration;
			$("#"+id).css({ 
        	   'display': 'block',
        	   'animation':animationVal,
        	   '-webkit-animation':animationVal
           });
		}
	}

	upCompAnima(name,value){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompAnimation(this.props.pageId,compId,{[name]:value},this.props.index));
	}

	deleteAnimation(){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(delCompAnimation(this.props.pageId,compId,this.props.index));
	}

	render(){
		const compId=this.props.currentComp.get('id');
		const animationOpts=ANIMATIONS.map(item=>{
			return (<option key={item.value} value={item.value}>{item.name}</option>)
		});
		//const animations=this.props.currentComp.get('animations');
		let animation=this.props.animation;
		return(
			<div className="panel-group">
				<div className="input-group">
				  <span className="input-group-addon">方案</span>
				  <select id={"animation_"+this.props.index} className="form-control input-sm" value={animation.get('name')} onChange={e=>this.upCompAnima('name',e.target.value)}>
				  	<option value="">无</option>
					{animationOpts}
				  </select>
				</div>
				<div className="input-group">
					<span className="input-group-addon">时长(秒)</span>
					<span className="input-group-addon ranger">
						<input id={"duration_"+this.props.index} type="range" step="0.1" min="0" max="10" style={{width:'100%'}} value={animation.get('duration')}  onChange={e=>this.upCompAnima('duration',e.target.value)} />
					</span>
					<input type="number" className="form-control input-sm" step="0.1" min="0" value={animation.get('duration')} onChange={e=>this.upCompAnima('duration',e.target.value)} />
				</div>
				<div className="input-group">
					<span className="input-group-addon">延时(秒)</span>
					<span className="input-group-addon ranger">
						<input id={"delay_"+this.props.index} type="range" step="0.1" min="0" max="10" style={{width:'100%'}} value={animation.get('delay')}  onChange={e=>this.upCompAnima('delay',e.target.value)} />
					</span>
					<input type="number" className="form-control input-sm" step="0.1" min="0" value={animation.get('delay')} onChange={e=>this.upCompAnima('delay',e.target.value)} />
				</div>
				<div className="input-group">
					<button className="mini ui button" onClick={()=>this.playAnimation(compId)}>播放 </button>
					&emsp;&emsp;
					<button className="mini ui button" onClick={()=>this.deleteAnimation()}>删除 </button>
				</div>
				<div className="ui divider"></div> 
			</div>
		);
	}
}

class AnimationTab extends Component{
	constructor(props){
		super(props);
	}

	addAnimation(){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(addCompAnimation(this.props.pageId,compId));
	}

	render(){
		const animations=this.props.currentComp.get('animations').map((item,idx)=>{
			return (<AnimationUnit key={idx} {...this.props} index={idx} animation={item} />);
		})
		return(
			<div>
				{animations}
				<div className="input-group">
					<button className="mini ui blue button" onClick={()=>this.addAnimation()}>添加动画</button>
				</div>
			</div>);

	}
}

export default AnimationTab;
